<template>
	<conf-module-container :show-page-tools="true">
		<template #Slot-Conf-Module-Header>
			<global-svg-icon
				icon-name="return"
				width="18px"
				height="18px"
				class="header-icon"
				style="cursor: pointer"
				@click="router.go(-1)"
			></global-svg-icon>
			<p class="personList-title font-20-bold">成员列表</p>
		</template>

		<template #Slot-Conf-Module-Content>
			<div style="padding-top: 20px">
				<global-table
					:data-source="tableAttr.data"
					:loading="tableAttr.loading"
					:columns="columns"
					:show-operation="false"
					:use-select="false"
				></global-table>

				<global-pagination
					:current="tableAttr.current"
					:page-size="tableAttr.pageSize"
					:total="tableAttr.total"
					@change="setTablePagination"
				></global-pagination>
			</div>
		</template>
	</conf-module-container>
</template>

<script setup lang="ts" name="role-members-table">
import { g6UseTable } from 'glasssix-vue3-hooks';
import { ConfModuleContainer } from '../../../components/index';
import { RoleAPI } from '../../../api';

const router = useRouter();
const route = useRoute();

const { tableAttr, setTableData, setTablePagination } = g6UseTable(RoleAPI.personList);

const columns: TsGlobalType.TsTableColumn[] = [
	{ dataIndex: 'phone', title: '手机号码', width: 200, ellipsis: true },
	{ dataIndex: 'userName', title: '姓名', width: 1000, ellipsis: true }
];
onMounted(() => {
	tableAttr.searchObj.roleId = route.query.id;
	setTableData();
});
</script>

<style lang="less" scoped>
.personList-title {
	margin-left: 10px;
	color: rgba(240, 246, 252, 0.95);
}
</style>
